import Icon from '@/components/icon'
import { getUserChannel } from '@/store/actions/home'
import { useInitialState } from '@/utils/hooks'
import { Tabs } from 'antd-mobile'
import styles from './index.module.scss'

const Home = () => {
  const { userChannels } = useInitialState(getUserChannel, 'home')
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      {/* 這裡需要判斷有沒有數據 剛開始的時候數據沒拿到為空所以下滑線計算不出來 當有數據再去渲染的話下劃線就會出現 */}
      {userChannels.length > 0 && (
        <Tabs className='tabs' activeLineMode='auto'>
          {userChannels.map(item => (
            <Tabs.Tab title={item.name} key={item.id}>
              {item.name}的內容
            </Tabs.Tab>
          ))}
        </Tabs>
      )}

      <div className='tabs-opration'>
        <Icon type='iconbtn_search' />
        <Icon type='iconbtn_channel' />
      </div>
    </div>
  )
}

export default Home
